<script setup lang="ts">
import useApiStore from '@/core/apiStore'
import { GapedRow, GapedColumn, Section } from '@/core/components'

const apiStore = useApiStore()
const handleApiTest = () => {
  apiStore.testApi({ name: 'alan' })
}
</script>

<template>
  <div>Vue3 project base</div>
  <GapedRow>
    <span>gaped-row-1</span>
    <span>gaped-row-2</span>
  </GapedRow>
  <Section border-color="gray" padding="5px">
    <GapedColumn>
      <span>gaped-column-1</span>
      <span>gaped-column-2</span>
    </GapedColumn>
  </Section>
  <div>
    <button @click="handleApiTest">api test</button>
  </div>
  <div v-if="apiStore.apiStates.testApi.data">
    {{ apiStore.apiStates.testApi.data }}
  </div>
</template>

<style scoped>
/* Add your styles here */
</style>
